<template>
  <div>
    <!-- 简单三级分类-->
    <!--数据区 -->
    <el-tree :data="menus" :props="defaultProps" node-key="catId" ref="menuTree" @node-click="nodeClick">
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [],//页面显示数据
      expandsKey: [],  //默认要展开的菜单 存放父id展开其子分类
      defaultProps: {
        children: "children",
        label: "name"
      }
    }
  },
  methods: {

    // 获取数据列表
    getTreeList() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        console.log("data-------", data.data)
        this.menus = data.data
      });
    },
    //像父组件发送事件
    nodeClick(data, node, component) {
      console.log("category子组件被点击", data, node, component);
    // "tree-node-click" 事件名
      this.$emit("tree-node-click", data, node, component)
    }
  },

  activated() {
    //页面被激活就会发送的请求
    this.getTreeList();
  },

}
</script>
